<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			1.高并发：Go语言
			2.Node服务器：作为中间件使用
			3.Node.js框架：
				Express设计模式：MVC
			
			4.历史介绍：
			angular 09年
			react 2013年，用户体验好
			vue 2014年，用户体验好
			
			5.前端框架与库的区别：
			jquery->DOM操作+请求
			art-template库->模板引擎操作DOM
			
				库：小而精，实现某一方面功能
				框架：大而全，全方位功能齐全
					简易的DOM+模板引擎+路由功能
					
				KFC类比：
					库是一个小套餐，框架是全家桶
					
				代码上的差异：
					库：调用某个函数，自己把控库的代码
					框架：初始化自身行为，执行编写的代码，施放一些资源
			
			6.	MySQL： 数据库
				SQL: 语言
		</pre>
		<img src="../img/mvc&mvvm.jpg" alt="" />
		<div id="app">
			{{name}}
			<button @click="test">点我</button>
			<p v-for="item in list" :key="item.id" v-show="item.age">{{item.name}}</p>
		</div>
		<!--1.引包-->
		<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//2.创建实例化对象
			//如果template定义了内容则优先加载template，否则加载#app的模板
			let data = {
				name: 'qianfeng',
				age: 22,
				list: [{
					id: 1,
					name: '11111',
					age: true
				},{
					id: 2,
					name: '222',
				}]
			}
			let vm = new Vue({
				//el: '#app',//绑定对象
				//data既可以是json对象也可以是函数return一个json对象
				/*data: {
					name: 'zqf'
				}*/
				data(){
					return data
				},
				//template: '<div>{{age}}</div>'
				methods: {
					test(){
						//this.list = [{id: 2, name: '333', age: true}]
						this.$set(this.list[1], 'age', true)
					}
				}
			})
			vm.$mount('#app')
			
			//除了数据属性，还暴露了一些有用的实例属性和方法，以$开头如$ref
			console.log(vm)
			console.log(vm.$el)
			console.log(vm.$el === document.getElementById("app"))//true
			console.log(vm.$data === data)//true
			
			
			
		</script>
	</body>
</html>
